<template>
    <div class="app_container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-form :inline="true" :model="listQuery" ref="listQuery" class="demo-form-inline" style="float:right">
                    <el-form-item label="">
                        <el-input type="text" v-model="listQuery.user_code" placeholder="输入用户ID" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type="text" v-model="listQuery.season_name" placeholder="输入赛季名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="item" v-loading="listLoading">
                <el-table ref="dataList" :data="menuList" style="width:100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column prop="id" label="序号"> </el-table-column>
                    <el-table-column prop="user_data.user_code" label="用户ID" > </el-table-column>
                    <el-table-column prop="user_data.nickname" label="用户昵称" > </el-table-column>
                    <el-table-column prop="user_data.head_picture" label="用户头像" >
                        <template slot-scope="scoped">
                            <el-popover placement="right" max-width="420" trigger="hover">
                                <img :src="scoped.row.user_data.head_picture" alt="" style="max-width: 200px;max-height: 200px">
                                <img slot="reference" :src="scoped.row.user_data.head_picture" alt="" style="width: 50px;">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cost_gold" label="花费" > </el-table-column>
                    <el-table-column prop="add_time" label="时间" > </el-table-column>
                    <el-table-column prop="war_order.name" label="所属赛季" > </el-table-column>
                </el-table>

                <cus-pagination
                    :total="total"
                    :page.sync="listQuery.page"
                    :limit.sync="listQuery.perPage"
                    @pagination="getList"
                />
            </div>
        </el-card>
    </div>
</template>

<script>
import {
    listData
} from "@/api/warOrder/advanceWarOrderRecord"

export default {
    data(){
        return {
            menuList:[],
            listQuery:{
                user_code:undefined,
                season_name:undefined,
                page:1,
                perPage:10,
            },
            total:0,
        }
    },
    created(){
        this.getList()
    },
    methods:{
        getList(){
            this.listLoading = true;
            let urlData = "?";
            if (this.listQuery.page) {
                urlData = urlData + `page=${this.listQuery.page}&`;
            }
            if (this.listQuery.perPage) {
                urlData = urlData + `perPage=${this.listQuery.perPage}`;
            }
            if (this.listQuery.user_code) {
                urlData = urlData + `&user_code=${this.listQuery.user_code}`;
            }
            if (this.listQuery.season_name) {
                urlData = urlData + `&season_name=${this.listQuery.season_name}`;
            }
            listData(urlData).then((response) => {
                let arr = response.data.list
                arr.forEach((item) => {
                    for(let key in item){
                        if(key === 'add_time'){
                            item.add_time = this.getData(item.add_time)
                        }
                    }
                })

                this.menuList = arr;

                this.total = response.data.meta.total;
                this.listLoading = false
            })
        },
        getData(value){
            let temp = new Date(value*1000)
            let y = temp.getFullYear();
            let m = temp.getMonth()+1;
            let d = temp.getDate();
            let h = temp.getHours();
            let mm = temp.getMinutes();
            let s = temp.getSeconds();
            return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
        },
        add0(m){
            return m<10?'0'+m:m
        },
        // 查询
        searchSubmit(){
            this.listQuery.page = 1
            this.getList()
        },
    }
}
</script>

<style scoped>
[v-cloak] {
        display: none;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }

    .demo-form-inline {
        float: right;
    }

    /deep/ .el-card__header {
        padding-bottom: 0;
    }
</style>
